<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
    <style>
      
        .container {width: 600px; height: 500px;
          float: left;  }
        .w200 {
    width: 200px;
    height: 200px;
}

.w100 {
    width: 100px;
    height: 100px;
}

.w50 {
    width: 50px;
    height: 50px;
}

.w30 {
    width: 30px;
    height: 30px;
}

.preview {
    background-color: #ccc;
    margin: 10px;
    /* 预览的图片溢出部分隐藏 */
    overflow: hidden;
}

.preview_box{
display: flex;
flex-direction :column 

}


    </style>
</head>
<body>
    
        <div class="container">
            <img src="./assets/images/sample2.jpg">
        </div>
        <div class="preview_box">
            <div class="preview w200"></div>
            <div class="preview w100"></div>
            <div class="preview w50"></div>
            <div class="preview w30"></div>
        </div>
<input type="file" id="file">
    <script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>
<script>
// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
// 指定预览区域
let options = {
    aspectRatio: 1,
    // 指定预览区域
    preview: ".preview",
}

$image.cropper(options);

// 1.3 创建裁剪区域


$('#file').change(function () {
    const file = this.files[0]
    const newSrc = URL.createObjectURL(file)
    $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', newSrc)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域
})
</script>
</body>
</html>